<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelId"
        filterable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
      </el-select>
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <!-- <span class="filter-item">--</span>
      <el-date-picker
        v-model="listQuery.endTime"
        class="filter-item"
        placeholder="结束时间"
        style="width: 220px;"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
      /> -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="序号" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道名称" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册页UV量" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.channelUvCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备安装量" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userDevicesCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户注册量" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应用下载数" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.downloadCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员数量" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userVipCount }}<span v-if="row.currentUserVipCount !== 0 " class="cap">({{ row.currentUserVipCount }})</span></span>
        </template>
      </el-table-column>
      <el-table-column label="UV/设备" min-width="150" align="center">
        <template slot-scope="{row}">
          <span v-if=" 0 < row.cdRate && row.cdRate < 150 ">{{ row.cdRate }}%</span>
          <span v-if=" row.cdRate == 0 ">-</span>
          <span v-if=" row.cdRate > 150 ">-</span>
        </template>
      </el-table-column>
      <el-table-column label="用户/设备" min-width="100" align="center">
        <template slot-scope="{row}">
          <span v-if=" 0 < row.udRate ">{{ row.udRate }}%</span>
          <span v-if=" row.udRate == 0 ">-</span>
        </template>
      </el-table-column>
      <el-table-column label="会员/用户" min-width="150" align="center">
        <template slot-scope="{row}">
          <span v-if=" 0 < row.uvRate ">{{ row.uvRate }}%</span>
          <span v-if=" row.uvRate == 0 ">-</span>
        </template>
      </el-table-column>
      <el-table-column label="首次登陆数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.firstlogin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实名认证数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.realAuth }}</span>
        </template>
      </el-table-column>
      <el-table-column label="基本信息认证数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.basicInfomation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行卡认证数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.bank }}</span>
        </template>
      </el-table-column>
      <el-table-column label="唤起支付数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.payApply }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付成功数量" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.paySuccess }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册页cpa" min-width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.cpa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="info" size="mini" @click="seeDayCount(row.id)">
            查看日统计
          </el-button>
        </template>
      </el-table-column>
      <!-- 折叠面板 -->
      <!-- <el-table-column type="expand">
        <template slot-scope="{row}">
          <div>
            {{ row.id }}
          </div>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="channelReport"
    />
    <el-dialog title="日统计" :visible.sync="daydialogFormVisible">
      <div class="filter-container">
        <el-date-picker
          v-model="daytimes.startTime"
          class="filter-item"
          placeholder="开始时间"
          style="width: 250px;"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilterDay">
          搜索
        </el-button>
      </div>
      <el-table
        :key="tableKey"
        :data="dayData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="时间" align="center" width="120">
          <template slot-scope="{row}">
            <span>{{ row.dates }}</span>
          </template>
        </el-table-column>
        <el-table-column label="注册页UV量" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.channelUvCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备安装量" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userDeviceCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户注册量" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userRegCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="会员数量" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.userVipCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="激活率 / 注册率 / 会员转化率" mini-width="220" align="left">
          <template slot-scope="{row}">
            <el-tag type="info">{{ row.cdRate =='0.00%' ? '-' : row.cdRate }} </el-tag>
            <el-tag type="info">{{ row.udRate =='0.00%' ? '-' : row.udRate }} </el-tag>
            <el-tag type="info">{{ row.vdRate =='0.00%' ? '-' : row.vdRate }} </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="daytotal>0"
        :total="daytotal"
        style="margin-top:0px"
        :page.sync="daytimes.current"
        :limit.sync="daytimes.size"
        @pagination="seeDayCount(dayId)"
      />
    </el-dialog>
  </div>
</template>

<script>

import { channelReport, channelDailyReport } from '@/api/channel'
import { getChannelIdAndNick } from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'CountChannel',
  components: { Pagination },
  directives: { waves },
  filters: {
    number(value) {
      return parseFloat(value).toFixed(2)
    }
  },
  data() {
    return {
      tableData: [],
      dayData: [],
      total: 0,
      daytotal: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 50
      },
      times: [],
      daytimes: {
        startTime: ['', ''],
        endTime: '',
        current: 1,
        size: 30
      },
      dayId: 0,
      daydialogFormVisible: false,
      dialogPvVisible: false,
      optionsCopy: [],
      options: [],
      listLoading: false
    }
  },
  created() {
    this.channelReport(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    // 渠道下拉
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          console.log(item)
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    // 获取列表
    async channelReport(listQuery) {
      this.listLoading = true
      const res = await channelReport(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
      this.listLoading = false
    },
    // 搜索
    handleFilter() {
      this.listQuery.current = 1
      this.listQuery.deviceVersion = this.listQuery.device_version
      // this.listQuery.channelName = this.listQuery.nickname
      this.listQuery.deviceId = this.listQuery.device_id
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.channelReport(this.listQuery)
    },
    // 查看日统计
    async seeDayCount(id) {
      this.dayData = []
      this.dayId = id
      this.daydialogFormVisible = true
      const res = await channelDailyReport({ channelId: this.dayId, startTime: this.daytimes.startTime[0], endTime: this.daytimes.startTime[1], current: this.daytimes.current, size: this.daytimes.size })

      if (res.data.code === 200) {
        this.dayData = res.data.data.records
        this.dayData.forEach(element => {
          if (element.channelUvCount === 0) {
            element.cdRate = '0.00%'
          } else {
            element.cdRate = parseFloat((element.userDeviceCount / element.channelUvCount) * 100).toFixed(2) + '%'
          }
          if (element.userDeviceCount === 0) {
            element.udRate = '0.00%'
          } else {
            element.udRate = parseFloat((element.userRegCount / element.userDeviceCount) * 100).toFixed(2) + '%'
          }
          if (element.userRegCount === 0) {
            element.vdRate = '0.00%'
          } else {
            element.vdRate = parseFloat((element.userVipCount / element.userRegCount) * 100).toFixed(2) + '%'
          }
        })
        this.daytotal = res.data.data.total
        console.log(this.daytotal)
      } else {
        this.$notify({
          title: 'Fail',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        })
      }
    },
    async handleFilterDay() {
      if (this.daytimes.startTime === null) {
        this.daytimes.startTime = ''
      }
      if (this.daytimes.endTime === null) {
        this.daytimes.endTime = ''
      }
      const res = await channelDailyReport({ channelId: this.dayId, startTime: this.daytimes.startTime[0], endTime: this.daytimes.startTime[1], current: this.daytimes.current, size: this.daytimes.size })
      if (res.data.code === 200) {
        this.dayData = res.data.data.records
        this.daytotal = res.data.data.total
        this.dayData.forEach(element => {
          if (element.channelUvCount === 0) {
            element.cdRate = '0.00%'
          } else {
            element.cdRate = parseFloat((element.userDeviceCount / element.channelUvCount) * 100).toFixed(2) + '%'
          }
          if (element.userDeviceCount === 0) {
            element.udRate = '0.00%'
          } else {
            element.udRate = parseFloat((element.userRegCount / element.userDeviceCount) * 100).toFixed(2) + '%'
          }
          if (element.userRegCount === 0) {
            element.vdRate = '0.00%'
          } else {
            element.vdRate = parseFloat((element.userVipCount / element.userRegCount) * 100).toFixed(2) + '%'
          }
        })
      } else {
        this.$notify({
          title: 'Fail',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>
.cap{
  opacity: .5;
}
</style>
